<template>
    <div>
        <el-card class="right-main">
            <div class="header" v-if="!istrain">
                <div class="search">
                    <el-input
                        v-model="input1"
                        class="inpstyle"
                        :prefix-icon="Search"
                        :v-model="str"
                    />
                    <el-button class="btn">搜索</el-button>
                </div>

                <div class="delall">
                    <span class="alldel" v-if="flag" @click="isalldel">批量删除</span>
                    <div class="btnall" v-else>
                        <span class="cancel" @click="cancel">取消</span>
                        <span class="confirm" @click="dialogVisible = true">确定</span>
                        <span class="checkall" @click="delall">全选</span>
                    </div>
                </div>
            </div>
            <el-dialog v-model="dialogVisible" title="提示" width="30%" :before-close="handleClose">
                <span>此操作将删除该项, 是否继续?</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="delone">确定</el-button>
                    </span>
                </template>
            </el-dialog>

            <div class="entirety">
                <div class="entirety-item" v-for="item in datashoeList" :key="item.id">
                    <div class="entirety">
                        <div class="entir">
                            <div class="divimg">
                                <img :src="item.pic" />
                                <img
                                    class="onicon"
                                    src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png"
                                />
                            </div>
                            <div class="text">
                                <div class="textdance">{{ item.name }}</div>
                                <div class="works">作品</div>
                                <div class="author">
                                    <div class="head-portrait">
                                        <img
                                            :src="
                                                item.avatar
                                                    ? item.avatar
                                                    : '../../../../../public/OIP-C (1).jpg'
                                            "
                                        />
                                    </div>
                                    <div class="headertext">
                                        {{ item.authorname ? item.authorname : '' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="time">昨天14:17</div>
                    <div class="del" @click="deledata(item)">删除</div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { Search } from '@element-plus/icons-vue';
import useTrainroomStore from '@/store/modules/trainroom';
import { ElMessageBox } from 'element-plus';
// import router from '@/router';
import { useRoute } from 'vue-router';
const TrainroomStore = useTrainroomStore();
const input1 = ref('');
const istrain = ref(false);
const props = defineProps(['istrainc']);
if (props.istrainc) {
    istrain.value = !props.istrainc;
}
const route = useRoute();
// const datashoeList = ref<showmodule[]>([]);

const str = ref();
//初始数据展示
const datashoeList = ref<showmodule[]>([]);
interface showmodule {
    name: string;
    pic: string;
    count: number;
    time: string;
    deleteFlag: string;
    id: string;
    url: string[];
    createTime: string;
    authorname: string;
    avatar: string;
    router: string;
    updateTime: string;
}

//批量删除
const flag = ref(true);
const isalldel = () => {
    flag.value = false;
};
//点击取消
const cancel = () => {
    flag.value = true;
};
//点击确定
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('此操作将删除该项, 是否继续?')
        .then(() => {
            TrainroomStore.showcachedata;
        })
        .catch(() => {
            // catch error
        });
};
//删除该项
const delone = () => {
    // Trainroomdata.slice();
};
//全选
const delall = () => {};

watch(
    route,
    (newValue, oldValue) => {
        setTimeout(() => {
            if (route.meta.title == 'cache') {
                datashoeList.value = TrainroomStore.showcachedatacon;
                //缓存数据
            }
            if (route.meta?.title == 'collect') {
                //收藏
                datashoeList.value = TrainroomStore.showcollectdatacon;
            }
            if (route.meta?.title == 'history') {
                datashoeList.value = TrainroomStore.historydatacon;
            }
        }, 100);
    },
    {
        immediate: true,
    }
);

onMounted(() => {
    TrainroomStore.getinittraindata();
});

const detialone = ref();
const deledata = (serInfo: showmodule) => {
    datashoeList ||
        [].filter((item, index) => {
            if (item == serInfo) {
                detialone.value = index;
            }
        });

    datashoeList || [].splice(detialone.value, 1);
};
</script>

<style scoped lang="less">
.right-main {
    // width: 100%;
    // height: 1000px;
    padding: 10px 20px;
    min-height: calc(100vh - 120px);

    .header {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        .search {
            .inpstyle {
                background-color: #f5f7f9;
                border-color: #eaecf0;
                width: 300px;
                height: 42px;
            }
            .btn {
                height: 40px;
                background: #f5f7f9;
                border-radius: 4px;
                color: #7d8090;
                font-size: 14px;
                display: inline-block;
                padding: 12px 17px;
                margin-left: 10px;
                cursor: pointer;
            }
        }
        .delall {
            color: #111;
            font-size: 14px;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            .btnall {
                // display: none;
                font-size: 14px;
                color: #f93684;
            }
            .confirm {
                margin: 0 20px 0 10px;
            }
        }
    }
}

.entirety {
    width: 936px;
    // height: 138px;
    // background-color: pink;
    margin-top: 10px;
    box-sizing: border-box;
    .entirety-item {
        width: 100%;
        height: 138px;
        display: flex;
        background-color: #fff;
        // justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #7d8090;
        &:hover {
            background-color: #ebeef5;
        }
        .entirety {
            width: 680px;
            .entir {
                width: 680px;
                height: 121px;
                display: flex;
                .divimg {
                    cursor: pointer;
                    position: relative;
                    width: 169px;
                    height: 101px;
                    box-sizing: border-box;
                    img {
                        align-items: center;
                        position: relative;
                        width: 169px;
                        height: 101px;
                        border-radius: 4px;
                        background-size: cover;
                        background-position: 50%;
                        justify-content: center;
                        -webkit-box-align: center;
                        display: flex;
                        -webkit-box-pack: center;
                    }
                    .onicon {
                        position: absolute;
                        bottom: 6px;
                        left: 10px;
                        width: 30px;
                        height: 30px;
                    }
                }
                .text {
                    height: 101px;
                    padding: 4px 0 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding-left: 17px;
                    font-size: 16px;
                    color: #111;
                    box-sizing: border-box;
                    .textdance {
                        cursor: pointer;
                    }
                    .works {
                        font-size: 14px;
                        color: rgb(125, 128, 144);
                        white-space: normal;
                        word-break: break-all;
                        line-height: 23px;
                    }
                    .author {
                        display: flex;
                        -webkit-box-align: center;
                        align-items: center;
                        box-sizing: border-box;
                        font-size: 16px;
                        color: #111;
                        .head-portrait {
                            cursor: pointer;
                            img {
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                margin-right: 11px;
                                background-size: cover;
                                background-position: 50%;
                            }
                        }
                        .headertext {
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        .time {
            width: 153px;
            height: 138px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all;
            line-height: 138px;
            padding-left: 10px;
            padding-right: 10px;
            color: rgb(17, 17, 17);
            font-size: 14px;
            text-align: center;
            margin: 0 20px;
        }
        .del {
            cursor: pointer;
            font-size: 14px;
            vertical-align: top;
            color: #b1b3bc;
            text-align: right;
            &:hover {
                color: #f93684;
            }
        }
    }
}
</style>
